<template>
    <div class="drow">
        <div class="wapper">
            <div class="drowbox">
                <div class="stateboxtext" v-if="showname == ''">
                    即兴表演
                </div>
                <div class="box" v-else>
                    {{ showindex }}
                </div>

                <div class="statebox">
                    {{ showname }}
                </div>



                <div class="musiclist">
                    <p>音乐抽取列表({{ fileslist.value.length }}首)</p>
                    <ul>
                        <li v-for="(item, indexdom) in fileslist.value" :key="item.id"
                            :class="{ active: (index == indexdom) && audioshow }">{{
                                item.filename }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from "vue"
import { fileList } from "../../api/api"
let index: any = ref(-1)
let init: any = ref(true)
let time: any = null
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
let showindex = ref(0)
let showname = ref('')
let audioshow = ref(false)
const state = () => {
    if (init.value == false) {
        // 防止二次抽奖
        return
    }

    init.value = false
    audioshow.value = false
    if (time) {
        clearInterval(time)
    }


    if (index.value > -1) {
        fileslist.value.splice(index.value, 1)
        arr.splice(index.value, 1)
    }
    time = window.setInterval(() => {
        index.value = RandomNumBoth(0, arr.length - 1)
        showindex.value = arr[index.value]
        showname.value = fileslist.value[index.value]?.filename
    }, 50)

}

const end = () => {
    audioshow.value = true
    clearInterval(time)
    init.value = true

}

function RandomNumBoth(Min: number, Max: number) {
    var Range = Max - Min;
    var Rand = Math.random();
    var num = Min + Math.round(Rand * Range); //四舍五入            
    return num;
}

let fileslist = reactive({ value: [] })
const getfilelist = () => {
    fileList().then(res => {
        res.data.forEach((item, index) => {
            item.filename = `${arr[index]}、${item.filename}`
            console.log(item)
        })
        fileslist.value = res.data

    })
}
getfilelist()



// let playAudio = () => {
//     var audio: any = document.getElementById("myAudio");
//     audio.play();
// }
// let pauseAudio = () => {
//     var audio: any = document.getElementById("myAudio");
//     audio.pause();
// }

// let again = () => {
//     var audio: any = document.getElementById("myAudio");
//     audio.currentTime = 0;
//     // audio.pause();
// }
// let delnum = () => {
//     fileslist.value.splice(index.value, 1)
//     arr.splice(index.value, 1)
// }

const func1 = () => {
    window.addEventListener(
        "keydown",
        function (e) {
            console.log(e);
            if (e.key == '1') {
                //抽奖开始
                state()
            }
            if (e.key == '2') {
                // 抽奖结束
                end()
            }
            // if (e.key == '3') {
            //     //音频播放
            //     playAudio()
            // }
            // if (e.key == '4') {
            //     // 音频暂停
            //     pauseAudio()
            // }
            // if (e.key == '5') {
            //     // 音频归零
            //     again()
            // }
            // if (e.key == '6') {
            //     // 音频删除
            //     delnum()e2
            // }
            if (e.code == 'Space') {
                // 空格全屏
                const html: any = document.querySelector('html');
                html.requestFullscreen()
            }

        },
        false
    );
};
func1(); //因为setup()即相当于created:  所以直接调用就行了
console.log('1开始，2暂停，3音频播放，4音频暂停，5音频归零，6音频删除，空格全屏，Esc退出全屏')
</script>
    
<style lang="less" scoped>
.drow {
    width: 100%;
    height: 100vh;
    background: url(../../assets/loginbg.png);
    background-size: 100% 100%;
    position: relative;

    .wapper {
        width: 90%;
        height: 80vh;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .drowbox {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        padding-right: 340px;

        .box {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 15vh;
            background: #0793ed;
            color: white;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            background-size: 100% !important;
            background: url("../../assets/drawbg.png") no-repeat;
        }

        .musiclist {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 90%;
            width: 320px;
            background: rgba(255, 255, 255, .2);
            border-radius: 5px;

            p {
                color: white;
                text-align: center;
                position: absolute;
                width: 100%;
                height: 60px;
                line-height: 60px;
                font-weight: bold;
                font-size: 18px;

                &::before {
                    position: absolute;
                    content: "";
                    top: 100%;
                    left: 0;
                    width: 100%;
                    background: -webkit-linear-gradient(left, rgba(248, 215, 59, 0), #3f93ca, rgba(248, 215, 59, 0));
                    height: 1px;
                }
            }

            ul {
                width: 100%;
                height: calc(100% - 40px);
                margin-top: 70px;

                li {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    width: 90%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    padding-left: 12px;
                    margin-top: 5px;
                    color: white;
                    font-size: 16px;
                }

                .active {
                    color: #4aa6d9;
                    font-weight: bold;
                }
            }
        }

        .statebox {
            display: flex;
            justify-content: space-evenly;
            margin-top: 35px;
            font-size: 40px;
            line-height: 60px;
            color: white;
            text-align: center;
            width: 100%;

            div {
                cursor: pointer;
                width: 100px;
                height: 40px;
                background: white;
                color: #000000;
                text-align: center;
                line-height: 40px;
            }
        }

        .stateboxtext {
            display: flex;
            justify-content: space-evenly;
            margin-top: 135px;
            font-size: 60px;
            line-height: 60px;
            color: white;
            text-align: center;
            width: 100%;

            div {
                cursor: pointer;
                width: 100px;
                height: 40px;
                background: white;
                color: #000000;
                text-align: center;
                line-height: 40px;
            }
        }
    }



}
</style>